<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		*{margin: 0;
		padding: 0;
		}
	h3{font-size:50px;
		margin-top: 1150px;
		margin-left: 320px;	
	}
	
	body{
		background-repeat:no-repeat;
		background:url(img/1.png);
		background-size: 100%;
		
	}
	#box{
		width: 200px;
		height: 100px;
		margin-top: -40px;
		margin-left: 590px;
	}
	#div1,#div2,#div3{
		background: black;
		border-radius: 50px;
		width: 15px;
		height: 15px;
		float: left;
		margin-right: 10px;
		display: none;
	}
	
	p{
		height: 110px;
		width: 110px;
		font-size:40px;
		margin-left: 430px;
		margin-top: -20px;
	}
	</style>
	<body>
		<h3>LOADING</h3><div id="box">
			<div id="div1"></div>
			<div id="div2"></div>
			<div id="div3"></div>
			
		</div>
		<p></p>
	</body>
</html>
		<script>
			var div1=document.querySelector("#div1")
			var div2=document.querySelector("#div2")
			var div3=document.querySelector("#div3")
			
			
		var tiemr0= setInterval(function(){
		div1.style.display='block'
			
		},800)
			
			
		var tiemr1= setInterval(function(){
		div2.style.display='block'
				
		},1300)
			
			var tiemr2=setInterval(function(){
				div3.style.display='block';
				
		},2000)
	
		
		var p=document.querySelector('p')
		var sum=0;
		var zd=setInterval(function(){
			
			sum++;
			p.innerHTML=sum+'%'
			
			if(sum==100){
				clearInterval(zd);
				window.open('2.html')
		}
			
		},20)
			
		</script>